<!-- 合同图表 -->
<template>
  <el-row class="content" style="width: 100%; height: 100%;" justify="center">
    <HTBlockMutiYBar :xAxis="contractCountAndAmountForScbk.xAxis" :counts="contractCountAndAmountForScbk.counts"
      :amounts="contractCountAndAmountForScbk.amounts" style="width: 20%; left: 0px" />
    <div class="select_scbk">
      <span>生产板块</span>
      <el-select v-model="selectScbk" placeholder="请选择" size="small" style="width: 60px" @change="handleOnScbkChange">
        <el-option v-for="item in scbkOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <HTMoneyCircle :scbk="selectScbk" :data="contractAmountForYwlx" style="width: 24%" />
    <HTNumCircle :scbk="selectScbk" :data="contractCountForYwlx" style="width: 14%" />
    <div class="select_ywlx">
      <span>业务类型</span>
      <el-select v-model="selectYwlx" placeholder="请选择" size="small" @change="handleOnYwlxChange">
        <el-option v-for="item in ywlxOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <HTBussinessMutiYBar :amounts="contractAmountAndCountForYwlx.amounts" :counts="contractAmountAndCountForYwlx.counts"
      style="width: 28%; right: 0px" />
  </el-row>
</template>

<script setup>
import HTBlockMutiYBar from './HTBlockMutiYBar.vue';
import HTMoneyCircle from './HTMoneyCircle.vue';
import HTNumCircle from './HTNumCircle.vue';
import HTBussinessMutiYBar from './HTBussinessMutiYBar.vue';
import { ref, reactive, onMounted } from 'vue';
import { getUniqueYwlxByScbk, getUniqueScbk, getContractCountAndAmountForScbk, getContractMonthAmountForYwlxByScbk, getContractCountForYwlx, getContractAmountForYwlx } from '@/api/screenApi';

const props = defineProps({ year: Number });

const selectScbk = ref('');
const scbkOptions = ref([]);

const handleOnScbkChange = () => {
  loadScbkBussinessAmounts().then(() => {
    loadYwlxAmountsandCounts();
  });
  // loadScbkBussinessCounts();
}

// 各生产板块金额数量
const contractCountAndAmountForScbk = reactive({
  xAxis: null,
  counts: null,
  amounts: null,
});

const loadScbkData = async () => {
  await getContractCountAndAmountForScbk(props.year).then(res => {
    if (Array.isArray(res.data.data)) {
      contractCountAndAmountForScbk.xAxis = res.data.data.map(item => item.scbk);
      contractCountAndAmountForScbk.counts = res.data.data.map(item => item.key);
      contractCountAndAmountForScbk.amounts = res.data.data.map(item => item.value);
      // scbkOptions.value = res.data.data.map(item => ({ value: item.scbk, label: item.scbk }));
      // selectScbk.value = scbkOptions.value[0].value;
    }
  })
  await getUniqueScbk(props.year).then(res => {
    scbkOptions.value = res.data.data.map(item => ({ value: item, label: item }));
    selectScbk.value = '全部';
  })
}

// 获取指定生成板块下各业务类型的金额
const contractAmountForYwlx = ref([]);

const loadScbkBussinessAmounts = async () => {
  await getContractAmountForYwlx(props.year, selectScbk.value).then(res => {
    if (Array.isArray(res.data.data)) {
      contractAmountForYwlx.value = res.data.data.map(item => ({ name: item.key, value: item.value }));
    }
  })

  await getUniqueYwlxByScbk(props.year, selectScbk.value).then(res => {
    ywlxOptions.value = res.data.data.map(item => ({ value: item, label: item }));
    selectYwlx.value = '全部';
  })
}

// 获取指定生成板块下各业务类型的数量
const contractCountForYwlx = ref([]);

const loadScbkBussinessCounts = () => {
  getContractCountForYwlx(props.year, selectScbk.value).then(res => {
    if (Array.isArray(res.data.data)) {
      contractCountForYwlx.value = res.data.data.map(item => ({ name: item.key, value: item.value }));
    }
  })
}

const selectYwlx = ref('');
const ywlxOptions = ref([]);

const handleOnYwlxChange = () => {
  loadYwlxAmountsandCounts();
}

// 合同：获取指定生成板块下的业务类型每月的金额数量
const contractAmountAndCountForYwlx = reactive({});

const loadYwlxAmountsandCounts = async () => {
  await getContractMonthAmountForYwlxByScbk(props.year, selectScbk.value, selectYwlx.value).then(res => {
    if (Array.isArray(res.data.data)) {
      contractAmountAndCountForYwlx.amounts = res.data.data.map(item => item.value);
      contractAmountAndCountForYwlx.counts = res.data.data.map(item => item.key);
    }
  })
}

const loadData = async () => {
  await loadScbkData();
  loadScbkBussinessCounts();
  await loadScbkBussinessAmounts();
  loadYwlxAmountsandCounts();
}

onMounted(() => {
  loadData();
});
</script>

<style scoped>
.select_scbk {
  z-index:999;
  display: flex;
  flex-direction: column;
  margin-left: 40px;
}
.select_ywlx {
  z-index:999;
  display: flex;
  flex-direction: column;
}
</style>
